<template>
  <div class="w-100 h-100">
    <div style="font-size: 20px">
      <img src="../../../../assets/image/jianshe/title.png" alt="" />
      水安全
    </div>
    <div style="height: calc(100%)">
      <div id="saq" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

const props = defineProps({
  type: {
    default: 0,
  },
  site: {
    default: 0,
  },
  year: {
    default: 2024,
  },
  month: {
    default: 1,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [[], []];
  try {
    data =
      jsonData.value.yxjk.saq[props.type][props.site][props.year][props.month];
  } catch (error) {}
  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [
          {
            data: []
          },
        ],
      });
      setTimeout(() => {
        myChart.setOption({
          series: [
            {
              data: val
            },
          ],
        });
      }, 20)

    }
  }
);

onMounted(() => {
  let option: any = {
    color: colorSingleList,
    tooltip: {
      show: true,
      trigger: "axis",
      borderColor: "transparent",
      backgroundColor: "rgba(28,64,81,0.7)",
      textStyle: {
        color: "white",
        fontSize: 20,
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "5%",
      top: "14%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      name: "日",
      type: "category",
      data: Array.from({ length: 31 }, (_, i) => i),
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        name: "m",
        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
            type: "solid", // 实线
          },
        },
      },
    ],
    series: [
      {
        name: "",
        type: "line",
        data: [],
        color: "rgba(184, 235, 143, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 1,
                color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
    ],
  };

  myChart = echarts.init(document.getElementById("saq") as HTMLElement);
  myChart.setOption(option);
});
</script>

<style></style>
